<!-- 目的地底部 banner -->
<template>
    <div class="box">  
        <div class="bg-img-box">
            <img src="@/../static/mddBanner.jpeg" width="100%" height="auto">
        </div>

        <div class="seach-box">
            <div class="search-box-i">
                <span class="eng-tip">Don't fear the unknown</span>
                <div class="search-box">
                    <input type="text" placeholder="我想去..." class="search-inp">
                    <span class="search-ico"><i class="fa fa-search" aria-hidden="true"></i></span>
                </div>
                <ul class="res-place-list">
                    <li class="res-place-item">首尔</li>
                    <li class="res-place-item">厦门</li>
                    <li class="res-place-item">武汉</li>
                    <li class="res-place-item">长沙</li>
                    <li class="res-place-item">清迈</li>
                </ul>
            </div>
        </div>

        <div class="inf-box">
            <h1 class="inf-title">神仙海岛的三款热门玩法，去普吉一定不能错过</h1>
            <p class="inf-con">
                关于泰国普吉岛，这个多面风情的岛屿，常年位于境外旅游热搜榜前列，第一次去的人，容易被它的热带海岛风情和高性价比吸引到想再二刷；第N次去的人，更是因为每次都能发现普吉的新玩法，让人想再多宠幸一遍。
            </p>
            <span class="inf-more">阅读原文</span>
        </div>

        <div class="down-box">
            <i class="el-icon-arrow-down"></i>
        </div>

        <div class="right-ico-box">
            <div class="ico-list">
                <span class="deg-box"><i class="el-icon-warning-outline"></i></span>
                <span class="time-box" title="过目不忘">
                    <i class="fa fa-calendar-o date-ico" aria-hidden="true"></i>
                    <span class="date-item">{{time}}</span>
                </span>
                <span class="share-box"><i class="fa fa-share-alt" aria-hidden="true"></i><span>分享</span></span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            time:'01'
        };
    },

    components: {},

    mounted(){
        this.getDate()
    },
    methods: {
        getDate(){
            var date =new Date();
            var strDate = date.getDate();
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            this.time = strDate
        }
    }
}

</script>
<style scoped lang="stylus" ref="stylesheet/stylus">
    .box
        width 100%
        height 787px
        margin-top -68px
        overflow hidden
        cursor pointer
        position relative
        .bg-img-box
            margin-top -240px
        .seach-box
            width 400px
            position absolute
            top 318px
            left 430px
            background-color: rgba(0,0,0,.4)
            color #ffffff
            padding 15px
            box-sizing border-box
            border-radius 4px
            .search-box-i
                display flex
                flex-direction column
                .eng-tip
                    font-size 20px
                    margin-bottom 15px
                .search-box
                    display flex
                    align-items center
                    .search-inp
                        font-size 18px
                        padding 0 20px
                        color #111
                        width 308px
                        height 46px
                        margin-right 6px
                        line-height 46px
                        background-color #ffffff
                        border-radius 4px
                        outline none 
                        border none
                    .search-ico
                        display block
                        background-color #ff9d00
                        width 45px
                        height 46px
                        border-radius 4px
                        text-align center
                        line-height 46px
                        font-size 25px
                .res-place-list
                    display flex
                    margin-top 15px
                    .res-place-item
                        margin-right 10px
                        font-size 14px
                        padding-bottom 5px
                        &:hover
                            cursor pointer
                            text-decoration underline


        .inf-box
            position absolute
            right 185px 
            top 250px
            width 550px
            border-right 8px solid #ffffff
            color #ffffff
            padding 0 30px
            .inf-title
                font-size 50px
                font-weight normal
                margin-bottom 15px
                &:hover
                    color #ff9d00
            .inf-con
                font-size 18px
                line-height 35px
                margin-bottom 20px
            .inf-more
                text-decoration underline
                font-size 24px
                &:hover
                    color #ff9d00
        .down-box
            position absolute
            font-size 50px
            bottom 10px
            left 50%
            color #ffffff
        .right-ico-box
            position absolute
            bottom 20px
            right 40px
            color #ffffff
            font-size 12px
            .ico-list
                display flex
                align-items center
                .deg-box
                    font-size 30px
                .time-box
                    margin 0 10px
                    .date-ico
                        position relative
                        font-size 30px
                    .date-item
                        position absolute
                        top 15px
                        left 46px
                        &:hover
                            text-decoration underline
                .share-box
                    text-align center
                    border 1px solid #ffffff
                    padding 5px 20px
                    border-radius 4px
                    &:hover
                        span 
                            text-decoration underline
                    i 
                        margin-right 10px
</style>